<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>XCE代码编辑器</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.css" media="all">
    <script src="./layui/layui.js"></script>
    <script>
        layui.config({
            base: './layui/lay/module/'
        }).extend({
            xce: '{/}./xce/xce',
            xTree: '{/}./xTree/xTree',
            xAce: '{/}./xAce/xAce',
            xUtils: '{/}./xUtils',
        });
    </script>
	<style>
		body{
			background: #676666;
		}
        .hide {
            display: none;
        }

        .demo{
            width: 1000px;
			margin: auto;

        }
		.layui-card-body{
			padding: 0;
		}
	</style>
</head>

<body style="padding: 18px;">
	<div class="layui-card demo">
		<div class="layui-card-header"><a href="https://gitee.com/imlzw/xicon" target="_blank">XCE代码编辑器</a></div>
		<div class="layui-card-body">
			<div id="xce-editor" style="height: 800px"></div>
		<div>
	</div>
</body>

<script>
layui.use(["xce"],function(){
    let xce = layui.xce;
	xce.render({
		elem: "#xce-editor",
		api: "api",
		apiStyle: "demo" //demo专用
	})
});
</script>

</html>